<template>
  <el-dialog title="添加图片" v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-form :model="form" :rules="formRules" ref="form" :label-width="formLabelWidth">
      <el-form-item label="显示位置" :label-width="formLabelWidth">
        <el-radio-group v-model="form.position">
          <el-radio :key="key" v-for="(cat, key) in addform.position" :value="Number(key)">{{
            cat }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="副标题" prop="sub_title">
        <el-input v-model="form.sub_title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="pic">
        <el-row>
          <div class="draggable-list">
            <div class="item img-select" v-if="!form.pic" @click="openUpload">
              <el-icon>
                <Plus />
              </el-icon>
            </div>
            <div v-else class="item" @click="openUpload">
              <img :src="form.pic" width="100" height="100" />
            </div>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="链接" prop="link">
        <el-row>
          <el-input placeholder="请选择链接地址" readonly v-model="form.link">
            <template #append>
              <el-button type="primary" @click="changeLink">选择链接</el-button>
            </template>
          </el-input>
        </el-row>
      </el-form-item>
      <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
        <el-input v-model.number="form.sort" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogFormVisible">取 消</el-button>
      <el-button type="primary" @click="addUser" :loading="loading">确 定</el-button>
    </template>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" type="image" @returnImgs="returnImgsFunc">上传图片</Upload>
    <Setlink v-if="is_linkset" :is_linkset="is_linkset" @closeDialog="closeLinkset">选择链接</Setlink>
  </el-dialog>
</template>

<script>
import { editContent } from "@/api/appsetting.js";
import Upload from "@/components/file/Upload.vue";
import Setlink from "@/components/setlink/Setlink.vue";
export default {
  components: {
    Upload,
    Setlink,
  },
  data() {
    return {
      form: {
        id: 0,
        title: "",
        sub_title: "",
        link_id: 0,
        link_type: "",
        link_text: "",
        link: "",
        pic: "",
        position: "",
        sort: 100,
      },
      is_linkset: false,
      formRules: {
        position: [
          {
            required: true,
            message: "请选择显示位置",
            trigger: "blur",
          },
        ],
        pic: [
          {
            required: true,
            message: "请上传图片",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "排序不能为空",
          },
          {
            type: "number",
            message: "排序必须为数字",
          },
        ],
      },
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      loading: false,
      /*是否上传图片*/
      isupload: false,
    };
  },
  props: ["open_add", "addform"],
  created() {
    this.dialogVisible = this.open_add;
    this.form = { ...this.form, ...this.addform.model };
    console.log(this.form);
  },
  methods: {
    /*添加用户*/
    addUser() {
      let self = this;
      let params = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          editContent(params)
            .then((data) => {
              self.loading = false;
              ElMessage({
                message: "添加成功",
                type: "success",
              });
              self.dialogFormVisible(true);
            })
            .catch((error) => {
              self.loading = false;
            });
        }
      });
    },

    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit("closeDialog", {
          type: "success",
          openDialog: false,
        });
      } else {
        this.$emit("closeDialog", {
          type: "error",
          openDialog: false,
        });
      }
      //初始化参数
      this.form = {
        id: 0,
        title: "",
        sub_title: "",
        link_id: 0,
        link_type: "",
        link_text: "",
        link: "",
        pic: "",
        position: "",
        sort: 100,
      };
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.form.pic = e[0].file_path;
      }
      this.isupload = false;
    },
    /*选择链接*/
    changeLink() {
      this.is_linkset = true;
    },

    /*获取链接并关闭弹窗*/
    closeLinkset(e) {
      console.log(e);
      this.is_linkset = false;
      if (e) {
        if (e.link_type != "diyLink") {
          this.form.link = e.type + "/" + e.name;
        } else {
          this.form.link = e.url;
        }
        this.form.link_type = e.link_type;
        this.form.link_id = e.link_id;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.draggable-list {
  display: flex;

  .item {
    --el-upload-picture-card-size: 120px;
    align-items: center;
    background-color: #fafafa;
    border: 1px dashed #cdd0d6;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    width: var(--el-upload-picture-card-size);
    height: var(--el-upload-picture-card-size);
    justify-content: center;
    vertical-align: top;
    position: relative;

    .img-item {
      width: 100%;
      height: 100%;
    }

    .delete-btn {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
